Vue day8/9

Promise

Promise 概念

1. Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以 new Promise() 得到一个 Promise 的实例；
2. 在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）
3. 在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法
4. Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
5. 既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：
   • 状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；
   • 状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；
   • 由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把 成功 或 失败的结果，返回给调用者；
6. 我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】 为 这个 Promise 异步操作，指定 成功（resolve） 和 失败（reject） 回调函数；

• 注意：这里 new 出来的 promise， 只是代表 【形式上】的一个异步操作；
• 什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是做什么具体的异步事情，目前还不清楚
• var promise = new Promise()
• 每当 new 一个 Promise 实例的时候，就会立即 执行这个 异步操作中的代码
• 也就是说，new 的时候，除了能够得到 一个 promise 实例之外，还会立即调用 我们为 Promise 构造函数传递的那个 function，执行这个 function 中的 异步操作代码；

Promise 使用

const fs = require('fs')
const path = require('path')

// 定义一个promise
// 初衷： 给路径，返回读取到的内容
function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}


getFileByPath(path.join(__dirname, './files/1.txt')
  .then(function (data) { // .then 成功时调用
    console.log(data + '-------')
  }, function (err) { // 第二个函数 失败时调用
    console.log(err.message)
  })

Promise 使用回调地狱

const fs = require('fs')
const path = require('path')

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}


getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)

    // 读取文件2
    return getFileByPath('./files/2.txt')
  })
  .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (err) { // catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并 马上进入 catch 去处理 Promise中 抛出的异常；
    console.log('这是自己的处理方式：' + err.message)
  })

使用mui的tab-top-webview-main完成分类滑动栏

兼容问题

1. 和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容性问题，导致tab栏失效，可以把mui-tab-item改名为mui-tab-item1，并复制相关的类样式，来解决这个问题；

   .mui-bar-tab .mui-tab-item1.mui-active {
     color: #007aff;
   }
   
   .mui-bar-tab .mui-tab-item1 {
     display: table-cell;
     overflow: hidden;
     width: 1%;
     height: 50px;
     text-align: center;
     vertical-align: middle;
     white-space: nowrap;
     text-overflow: ellipsis;
     color: #929292;
   }
   
   .mui-bar-tab .mui-tab-item1 .mui-icon {
     top: 3px;
     width: 24px;
     height: 24px;
     padding-top: 0;
     padding-bottom: 0;
   }
   
   .mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
     font-size: 11px;
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
   }

2. tab-top-webview-main组件第一次显示到页面中的时候，无法被滑动的解决方案：

   • 先导入 mui 的JS文件:

     import mui from '../../../lib/mui/js/mui.min.js'

   • 在 组件的 mounted 事件钩子中，注册 mui 的滚动事件：

     mounted() {
       	// 需要在组件的 mounted 事件钩子中，注册 mui 的 scroll 滚动事件
           mui('.mui-scroll-wrapper').scroll({
             deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
           });
     true}

3. 滑动的时候报警告：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

   解决方法，可以加上* { touch-action: none; } 这句样式去掉。

原因：（是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西） http://www.cnblogs.com/pearl07/p/6589114.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

移除严格模式

babel-plugin-transform-remove-strict-mode

vue-preview

一个Vue集成PhotoSwipe图片预览插件